<template>
  <div style="height: 60px; line-height:50px; border-bottom: 1px solid #30333c; display: flex;background-color: #30333c">
    <div style="width: 200px; padding-left:10px; font-weight: bold;">
      <img :src="imgUrl" class="icon">
    </div>
    <div style="flex: 1; display: flex; align-items: center; justify-content: center;margin-top: 10px">
      <div id="ma" style="width: 100%; height: 80%;box-sizing: border-box;"></div>
    </div>

    <div style="width: 120px" trigger="click">
      <el-dropdown>
      <span class="el-dropdown-link "  style="color: white;" aria-haspopup="true" aria-expanded="false">
        <el-icon style="margin-right: 5px;"><user /></el-icon>
        {{user.nickName}} <el-icon class="el-icon--right">
          <arrow-down />
          </el-icon>
      </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="exit">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import * as echarts from 'echarts'

export default {
  name: "Header",
  props: ['user'],
  data(){
    return{
      user:[],
      imgUrl:require("../assets/icon/hs1.png")
    }
  },
  created(){
    let userStr = sessionStorage.getItem("user")||"{}"
    this.user = JSON.parse(userStr)
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('ma'))
    // 绘制图表
    myChart1.setOption({
      graphic: {
        elements: [
          {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: '华商校园场馆预约平台',
              fontSize: 30,
              fontWeight: 'bold',
              lineDash: [0, 100],
              lineDashOffset: 0,
              fill: 'transparent',
              stroke: '#ADD8E6',
              lineWidth: 1
            },
            keyframeAnimation: {
              duration: 8000,
              loop: false,
              keyframes: [
                {
                  percent: 0.5,
                  style: {
                    fill: '#FFF'
                  }
                }
              ]
            }

          }
        ]
      }
    })
    window.addEventListener('resize', () => {
      myChart1.resize()
    })
  },
  methods:{
    exit(){
      sessionStorage.removeItem("user")
      this.$router.push("/login")
      ElMessage.success("退出系统成功")
    }
  }

}
</script>

<style scoped>
.icon {
  width: 65px;
  height: 60px;
  padding-top: 0px;
  padding-right: 5px;
}


</style>

